<template>
  <div class="container">
    <el-row :gutter="10">
      <!-- 一 -->
      <el-col :span="6">
        <el-card>
          <Detail title="总销售额" count="￥ 13450">
            <template slot="charts">
              <span>
                周同比 56.78%
                <i class="el-icon-caret-top" style="color:red;"></i>
              </span>
              <span>
                日同比 13.31%
                <i class="el-icon-caret-bottom" style="color:green;"></i>
              </span>
            </template>
            <template slot="footer">
              <span>日销售额 ￥ 120</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <!-- 二 -->
      <el-col :span="6">
        <el-card>
          <Detail title="访问量" count="1200">
            <template slot="charts">
              <LineChart></LineChart>
            </template>
            <template slot="footer">
              <span>日访问量 12</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <!-- 三 -->
      <el-col :span="6">
        <el-card>
          <Detail title="支付笔数" count="1200">
            <template slot="charts">
              <BarChart></BarChart>
            </template>
            <template slot="footer">
              <span>转化率 34%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <!-- 四 -->
      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" count="40%">
            <template slot="charts">
              <ProgessChart></ProgessChart>
            </template>
            <template slot="footer">
              <span>
                周同比 56.78%
                <i class="el-icon-caret-top" style="color:red;"></i>
              </span>
              <span>
                日同比 13.31%
                <i class="el-icon-caret-bottom" style="color:green;"></i>
              </span>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from './Detail'
import LineChart from './LineChart'
import BarChart from './BarChart'
import ProgessChart from './progressChart'

export default {
  name: 'Card',
  components: { Detail, LineChart, BarChart, ProgessChart }
}
</script>

<style scoped>
.container {
  margin-top: 20px;
}
</style>